<template>
  <div>
    <div class="news-d-top">
      <div class="news-d-title">
        <h1>{{info.title}}</h1>
        <div class="news-d-author">
          <span>作者：{{info.author}}</span>
          <span>时间：{{info.create_time}}</span>
        </div>
      </div>
    </div>
    <div class="news-d-content" v-html="info.content"></div>
    <div class="news-d-wechat">
      <span>分享到：</span>
      <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/news/wechat.png" @click="shares()" />
    </div>
    <div class="news-more">
      <div class="new-more-position" :style="per ? '' : 'opacity:0'">
        <router-link
          class="morer-link"
          v-if="per"
          :to="'/index/news/detail/'+per.id"
        >上一篇：{{per.title}}</router-link>
      </div>
      <div class="new-more-all">
        <router-link to="/index/news/index" class="all-link">
          <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/bu/newmore.png" alt /> 查看全部
          <!-- <img src="../../assets/bu/btn.png" alt=""> -->
        </router-link>
      </div>
      <div class="new-more-position" :style="next ? '' : 'opacity:0'">
        <router-link
          class="morer-link"
          v-if="next"
          :to="'/index/news/detail/'+next.id"
        >下一篇：{{next.title}}</router-link>
      </div>
    </div>
    <div class="qrcode-model" v-if="qrcode_show" @click="closeQr()">
      <div class="qrcode-box">
        <div class="arcode-title">分享二维码</div>
        <div id="qrcode"></div>
        <!-- <div class="arcode_pic"> -->
        <img src="https://jingye.oss-cn-qingdao.aliyuncs.com/logo-sm.jpg" id="img-buffer" />
        <!-- </div> -->
        <div class="qrcode-close">请使用微信扫码分享</div>
        <div class="qrocde-close-txt">关闭</div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      id: 0,
      info: {},
      per: {},
      next: {},
      qrcode_show: false,
      url: ""
    };
  },
  created() {},
  mounted() {
    // var ua = window.navigator.userAgent.toLowerCase();
    this.id = this.$route.params.id;
    this.getData();
    this.url = window.location.href;
  },

  methods: {
    toshare() {
      this.ajaxs("wx/actionSqrcode", {
        data: { url: this.url },
        success: res => {
          // window.console.log(res);
          // window.console.log(this.info)
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: "wx84e36504b9d05ef0", // 必填，公众号的唯一标识
            timestamp: res.msg.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.msg.noncestr, // 必填，生成签名的随机串
            signature: res.msg.signature, // 必填，签名
            jsApiList: ["updateTimelineShareData", "updateAppMessageShareData"] // 必填，需要使用的JS接口列表
          });
          wx.ready(() => {
            // alert(this.info.title);
            // 这里是分享到朋友的
            wx.updateAppMessageShareData({
              title: this.info.title, // 分享标题
              desc: this.info.let_title, // 分享描述
              link: this.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: this.info.cover, // 分享图标
              success: () => {
                // window.console.log(this.info.content);
              },
              complete: function() {}
            });
            wx.updateTimelineShareData({
              // 这个是分享到朋友圈的
              title: this.info.title, // 分享标题
              link: this.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: this.info.cover, // 分享图标
              success: res => {},
              complete: function() {}
            });
          });
        }
      });
    },
    getData() {
      this.ajaxs("index/getNewsDetail", {
        data: { id: this.id },
        success: res => {
          let let_title = res.msg.info.content.split("<p>")[1];
          let_title = let_title.split("</p>")[0];
          window.console.log(let_title);
          res.msg.info.let_title = let_title;
          res.msg.info.img_url =
            "https://jingye.oss-cn-qingdao.aliyuncs.com/logo-sm.jpg";
          this.info = res.msg.info;
          this.per = res.msg.per;
          this.next = res.msg.next;
          this.toshare();
        }
      });
    },
    shares() {
      this.qrcode_show = true;
      setTimeout(() => {
        var url = "http://www.jyecloud.cn" + this.$route.fullPath;
        $("#qrcode").qrcode({
          render: "canvas", //设置渲染方式，有table和canvas，使用canvas方式渲染性能相对来说比较好
          minVersion: 3, // version range somewhere in 1 .. 40
          maxVersion: 40,
          ecLevel: "Q", //识别度  'L', 'M', 'Q' or 'H'
          left: 0,
          top: 0,
          size: 200, //尺寸
          fill: "#000", //二维码颜色
          background: null, //背景色
          text: url, //二维码内容
          radius: 0, // 0.0 .. 0.5
          quiet: 2, //边距 // 4: image box
          mode: 4,
          mSize: 0.2, //图片大小
          mPosX: 0.5,
          mPosY: 0.5,

          label: "jQuery.qrcode",
          fontname: "sans",
          fontcolor: "#000",
          image: $("#img-buffer")[0]
        });
      });
    },
    closeQr() {
      this.qrcode_show = false;
    }
  },
  watch: {
    // 方法1
    $route(to, from) {
      this.url = "http://www.jyecloud.cn" + this.$route.fullPath;
      this.id = this.$route.params.id;
      this.getData();
    }
  }
};
</script>

<style scoped>
@import url("../../assets/css/news/detail.css");
</style>